<style>
    #notice-detail {
        padding: 20px 25px 25px 0;
    }
    img[src=""],img:not([src]){

        opacity:0;

    }
</style>

<div class="layui-fluid" id="notice-detail">
    <form class="layui-form" action="" lay-filter="notice-detail-form">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label ">通知图片</label>
            <div class="layui-upload">
                <span id="imgUrl" >
                </span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label ">通知标题</label>
            <div class="layui-input-block">
                <input type="text" id="txtTitle"  name="title" minlength="2" maxlength="50"
                       autocomplete="off" class="layui-input" disabled="true" readonly="true">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司名</label>
            <div class="layui-input-block">
                <input type="text" id="txtCompany" data-th-value="陕西全务" minlength="4" maxlength="100"
                       autocomplete="off" class="layui-input" disabled="true" readonly="true">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建人</label>
            <div class="layui-input-block">
                <input type="text" id="txtCreateUser"   name="username" data-th-value="${noticeName}" minlength="2" maxlength="100"
                       autocomplete="off" class="layui-input" disabled="true" readonly="true">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建日期</label>
            <div class="layui-input-block">
                <input type="text" data-th-value="${createDateTime}"   disabled="true" name="createTime" id="txtCreateTime" minlength="4" maxlength="100"
                       autocomplete="off" class="layui-input" readonly="true">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">通知内容</label>
            <div class="layui-input-block">
                <textarea name="content"  id="txtContent" maxlength="100" class="layui-textarea" disabled="true" readonly="true"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">通知视频</label>
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <div id="videoUrl" style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">通知附件</label>
            <div class="layui-upload-list" style="float: left">
                <span id="fileUrl"></span>

            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md10">
                <div class="layui-form-item" >
                    <label class="layui-form-label">接收人</label>
                    <div class="layui-input-block">
                        <textarea type="text" id="txtAdvice" data-th-text="${noticeUserId}" name="userId" lay-verify="" autocomplete="off"
                                  class="layui-textarea" disabled="true" readonly="true"></textarea>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['febs', 'form', 'xmSelect', 'validate', 'laydate','dropdown', 'jquery', 'table'], function () {
        let $ = layui.$,
            form = layui.form,
            noticevoid = [[${noticevoid}]],
            fileurl=[[${fileurl}]],
            txtTitle = [[${noticeTitle}]],
            noticeContent = [[${noticeContent}]],
            img = [[${img}]];


        init();
        function init() {

            let noticevoUrl = noticevoid;
            let imgUrl=img;
            let fileUrl=fileurl;
            if(noticevoUrl === ""){
                $("#videoUrl").append("无通知视频");
                $("#videoUrl").parent().css('float','left');
            }else{
                $("#videoUrl").append("<video class='layui-upload-video' src='"+ noticevoUrl +"' controls='controls' style='vertical-align: bottom;width: 83%'></video>");
            }
            if(imgUrl === ""){
                $("#imgUrl").append("无图片");
            }else{
                $("#imgUrl").append("<img class='layui-upload-img' width=\"200px\" id=\"imgNotice\" height=\"100px\"src='" + imgUrl + "'>");
            }

            if(fileUrl === ""){
                $("#fileUrl").append("无附件");
            }else{
                $("#fileUrl").append("<a class='layui-icon layui-icon-file-image' target='_blank' href='" + fileUrl + "'>" + "附件" + "</a>");
            }
        }

        //回填
        form.val("notice-detail-form", {
            "title": HTMLDecode(txtTitle)
            ,"content":HTMLDecode(noticeContent)
        });


        //文本框内容转义
        function HTMLEncode(html) {
            var temp = document.createElement("div");
            (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
            var output = temp.innerHTML;
            temp = null;
            return output;
        }


        //文本框内容反转义
        function HTMLDecode(text) {
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }

    });
</script>